<template>
  <b-navbar style="background-color: #999" id="top-navbar" class="py-2 shadow-sm fw-light bg-light" toggleable="lg" type="light" variant="faded" sticky>
    <div class="container px-2">
      <!-- 导航栏头像与标题 -->
      <b-navbar-toggle target="nav-collapse" class="border-0 p-1">
        <b-icon icon="card-list "></b-icon>
        <small class="font-size m-1">首页</small>
      </b-navbar-toggle>
      <b-navbar-brand to="/" class="fc-red m-auto">
        <b-img :src="avatar_url" class="d-inline-block align-middle me-2" alt="avatar" rounded="circle" width="48"></b-img>
        {{ title }}
      </b-navbar-brand>
      <b-collapse id="nav-collapse" is-nav>
        <b-navbar-nav>
          <b-nav-text class="mx-2 fw-normal">
            <small>{{ description }}</small>
          </b-nav-text>
        </b-navbar-nav>
        <!-- 导航栏右侧组件 -->
        <b-navbar-nav class="ms-auto">
          <b-navbar-nav>
            <b-nav-item to="/" class="mx-2">首页</b-nav-item>
          </b-navbar-nav>
          <b-navbar-nav>
            <b-nav-item to="/about" class="mx-2">关于我</b-nav-item>
          </b-navbar-nav>
        </b-navbar-nav>
      </b-collapse>

      <div class="ml-3">
        <b-button pill variant="primary" v-b-toggle.collapse-3 class="mr-2">搜索文章</b-button>
      </div>
      <div style="width: 20px"></div>
      <b-collapse id="collapse-3" class="mr-5">
        <b-input-group class="search">
          <b-input-group-prepend class="p-2 m-1">
            <i class="zi zi_search" zico="搜索"></i>
          </b-input-group-prepend>
          <b-form-input class="search-ipunt" placeholder="搜索"></b-form-input>
        </b-input-group>
      </b-collapse>
    </div>
  </b-navbar>
</template>

<script>
export default {
  name: "TopBar",
  data() {
    return {
      title: "织网博客",
      description: "个人博客、记录学习笔记、点滴生活",
      avatar_url: require("../assets/images/avatar_1.jpeg"),
    };
  },
  methods: {
    toguid(path, id) {
      var Path = path;
      var Id = id;
      localStorage.setItem("toId", Id);
      this.$router.push(Path);
    },
  },
};
</script>

<style>
.search {
  background-color: rgb(240, 240, 240);
  border: 1px solid rgb(240, 240, 240);
  border-radius: 25px;
  display: flex;
  align-items: center;

  .search-ipunt {
    border: none;
    max-width: 86%;
    background-color: inherit !important;
  }

  .search-ipunt:focus {
    border-color: #fff;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}
</style>
